<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<body>
<div th:replace="~{/common/header::header-body}"></div>

<div class="container mt-3">
    <ul class="list-group list-group-flush">
        <li class="list-group-item" th:each="article:${articles}">
            <h3><a class="page-link" th:href="@{'/article/'+${article.getId()}}" th:text="${article.getTitle()}">标题</a></h3>
            <p th:text="${article.getContent()}">内容</p>
        </li>
    </ul>
</div>

<!--分页页面按钮-->
<div class="container mt-3">
    <ul class="pagination justify-content-center" style="margin:20px 0">
<!--        上一页需要判断当前页是否已经是第一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==1?1:page-1}}">上一页</a></li>
<!--        高亮当前页按钮-->
        <li th:each="i:${#numbers.sequence(1, totalPage)}" th:class="${page==i}?'page-item active':'page-item'">
            <a class="page-link" th:href="@{'/page/'+${i}}" th:text="${i}">1</a>
        </li>
<!--        下一页需要判断当前页是否已经是最后一页-->
        <li class="page-item"><a class="page-link" th:href="@{'/page/'+${page==totalPage?totalPage:page+1}}">下一页</a></li>
    </ul>
</div>
</body>
</html>